.signature-container {
	height: 100%;
	width: 100%;
	.preview-container {
		width: 100%;
		min-height: 200rpx;
		image {
			width: 100%;
			background-color: #ffffff;
			border: 2px solid #F1F1F1;
		}
	}
	.signature-board-container{
		z-index: 9000;
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		.signature-board-main {
			background: #ffffff;
			flex-direction: row-reverse;
			display: flex;
			align-items: stretch;
			height: 100%;
			overflow: scroll;
			.signature-title {
				font-weight: bold;
				font-size: 36rpx;
				display: flex;
				padding: 0 20rpx;
				flex-direction: column;
				justify-content: center;
				height: 100vh;
				text {
					transform: rotate(90deg);
				}
			}
			.button-container {
				display: flex;
				padding: 2px;
				// margin-right: 5px;
				flex-direction: column;
				//justify-content: space-between;
				.btn {
					flex-grow: 1;
					flex-shrink: 0;
					padding: 20rpx;
					font-size: 34rpx;
					margin: 0;
					text-align: center;
					text-decoration: none;
					height: 30vh;
					display: flex;
					align-content: center;
					justify-content: center;
					flex-direction: column;
					font-weight: 600;
					text {
						transform: rotate(90deg);
					}

					&+.btn {
						border-top: 1px solid #eee;
					}

					&.btn-clear {
						// background-color: #fc2a07;
						color: red;
					}

					&.btn-cancel {
						// background-color: #eff4f4;
						color: $uni-color-warning;
					}

					&.btn-submit {
						// background-color: $uni-color-success;
						color: #333333;
					}
				}
			}

		}
		canvas {
			width: 90vw;
			height: 90vh;
			margin: 10px 0;
			align-self: center;
			background-color: #ffffff;
			border: 2px solid #F1F1F1;
			border-radius: 25rpx;
		}
	}
}
